<%--
  Created by IntelliJ IDEA.
  User: A
  Date: 2021/10/15
  Time: 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link href="${pageContext.request.contextPath}/css/myorder.css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/res/jquery/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/res/layui/layui.js" charset="utf-8"></script>
    <style>
        .layui-laypage-default {
            margin-left: 380px;
            margin-top: 40px;

        }

        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #5f5d5d;
        }
    </style>
</head>
<body>


<!--====背景-->
<div class="bg">
    <!--最上面的导航-->
    <jsp:include page="../common/header.jsp" flush="true"/>

    <div id="o-header-2013">
        <div id="header-2013" style="display:none;"></div>
    </div>

    <!-- 下面的带 logo 的部分 -->
    <div id="nav">
        <div class="w">

            <!-- logo 部分 -->
            <div class="logo">
                <a href="" class="fore11" target="_blank"></a>
                <a href="" class="fore22" target="_blank">我的树懒</a>
                <a href="http://localhost:8080/shulanmiaosha/product/generalMerchandise.jsp" class="fore33"
                   target="_blank">返回树懒首页</a>
            </div>

            <!-- 我的购物车部分样式 -->
            <div class="nav-r zidingyiright">
                <div id="settleup-2014" class="dorpdown">
                    <a href="${pageContext.request.contextPath}/shopcar" target="_blank">
                        <div class="cw-icon" id="zidingyi">
                            <i class="ci-left"></i>
                            <%--                        <i class="ci-right">></i>--%>
                            <!--<i class="ci-count" id="shopping-amount">28</i>-->
                            <span style="left: 20px;position: absolute;">我的购物车</span>
                        </div>
                    </a>

                </div>
            </div>

        </div>
    </div>
    <div class="head">
        <div class="myorder">
            <div class="head-nav">
                <ul>
                    <li><a href="${pageContext.request.contextPath}/myorder">全部订单</a></li>
                    <li><a href="${pageContext.request.contextPath}/myorder/0">未付款</a></li>
                    <li><a href="${pageContext.request.contextPath}/myorder/1">待发货</a></li>
                    <li><a href="${pageContext.request.contextPath}/myorder/2">待收货</a></li>
                    <li><a href="${pageContext.request.contextPath}/myorder/3">待评价</a></li>
                    <li><a href="${pageContext.request.contextPath}/myorder/4">已完成</a></li>

                </ul>
            </div>
            <div class="search-right">

                <%--                <form action="" class="search-form">--%>
                <%--                    <input type="text" class="keyword" placeholder="商品名称/商品订单号">--%>
                <%--                    <a href="" class="search-btn">搜索</a>--%>
                <%--                </form>--%>

            </div>


        </div>

        <!--  订单详情-->
        <div class="cart-head">
            <div class="head-goods">订单详情</div>
            <div class="head-right">数量</div>
            <div class="head-right">收货人</div>
            <div class="head-right">金额</div>
            <div class="head-right">订单状态</div>
            <div class="head-right">操作</div>
        </div>  <!--myorder数据-->

        <div class="nofind">
            <a class="nofindpicture"></a><a>没有符合条件的宝贝哦，请尝试其他搜索条件</a></div>


        <c:forEach var="VO" items="${serverResponse.data}">


            <c:if test="${VO.orderDetailsProductMap.size()>0}">
                <input type="hidden" class="flag" value="${VO.orderDetailsProductMap.size()}">


                <div class="allorder">


                    <div class="ordertime">
                        <div class="order-time"><span>
                            <fmt:formatDate value="${VO.myorder.orderDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                  </span></div>
                        <div class="order-time3"><span>订单编号：</span></div>

                        <div class="order-time2"><span>
                                ${VO.myorder.orderNo} </span></div>
                        <div>
                            <form action="${pageContext.request.contextPath}/myorder/delete" method="post"
                                  class="deleteForm${VO.myorder.orderId}">
<%--                                <input type="hidden" name="_method" value="put">--%>
                                <input type="hidden" value="${VO.myorder.orderId}" name="myOrderId" class="detailId">


                                <input type="button" class="deleteBtn"
                                       style="border: none;  background-color: white; float:right;margin-right: 20px;margin-top:6px;color: #616161 "
                                       value=""/>
                            </form>
                                <%--               删除             <c:forEach var="map" items="${VO.orderDetailsProductMap}">--%>
                            <c:if test="${VO.myorder.orderStates == 0}">

                                <button onclick="btn2()" class="checkout-submit"
                                        style="border: none;float: right; background-color: white; margin-right: 60px;margin-top:3px;color: red;font-size: 13px "
                                        id="order-submit">
                                    <input type="button" data-id="${VO.myorder.orderId}" class="hhorderId" value="去付款">

                                </button>
                            </c:if>
                                <%--                            </c:forEach>--%>
                        </div>
                    </div>


                </div>
            </c:if>


            <c:forEach var="map" items="${VO.orderDetailsProductMap}">

                <div class="goods-detail">
                    <!-- 左边（图片名称）-->
                    <div class="goods-left">

                        <div class="number">
                                ${map.key.odProCount}</div>
                        <a href="" class="goods-img">
                            <img src=" ${map.value.proImg}">
                        </a>
                        <a href="" class="goods-name">
                                ${map.value.proBrand}: ${map.value.proDesc}</a>

                    </div>


                    <!-- 右边（价格操作）-->
                    <div class="goods-right">
                        <div class="cell cart-name"><span> ${VO.address.addressName}</span></div>
                        <div class="cell unit-price">
                            <span>￥</span>

                            <c:if test="${!empty VO.myorder.superId}">
                                <span> ${VO.myorder.orderPrice}</span>
                            </c:if>

                            <c:if test="${empty VO.myorder.superId}">
                                <span> ${map.value.proPrice}</span>
                            </c:if>

                        </div>

                        <div class="cell cart-status">

                            <c:if test="${map.key.odStates == 0}">
                                <a>未付款</a>
                            </c:if>
                            <c:if test="${map.key.odStates == 1}">
                                <a>待发货</a>
                            </c:if>
                            <c:if test="${map.key.odStates == 2}">
                                <a>待收货</a>
                            </c:if>
                            <c:if test="${map.key.odStates == 3}">
                                <a>待评价</a>
                            </c:if>
                            <c:if test="${map.key.odStates == -1}">
                                <a>交易关闭</a>
                            </c:if>
                            <c:if test="${map.key.odStates == 4}">
                                <a>已完成</a>
                            </c:if>

                        </div>
                        <div class="cell cart-delete">


                            <a href="${pageContext.request.contextPath}/order/order_details/${map.key.odDetailsId}"
                               style="margin-left: 20px;font-size: 13px">订单详情</a>
                            <c:if test="${map.key.odStates == 2}">
                                <form action="${pageContext.request.contextPath}/myorder/dicision" method="post"
                                      class="okForm${map.key.odDetailsId}">
<%--                                    <input type="hidden" name="_method" value="put">--%>
                                    <input type="hidden" value="${map.key.odDetailsId}" name="odDetailsId" class="okId">
                                    <input type="button" class="okBtn"
                                           style="border: none; background-color: white; margin-left: 70px;color: #616161; "
                                           value="确认收货"/>
                                </form>
                            </c:if>

<%--                            <c:if test="${map.key.odStates == 3}">--%>
<%--                                <a href=""--%>
<%--                                   style="margin-left: 23px;font-size: 13px">去评价</a> </c:if>--%>
                        </div>

                    </div>

                </div>

            </c:forEach>

        </c:forEach>


        <%--                </c:if>--%>
        <%--                </c:forEach>--%>


    </div>
    <div class="headunder">

        <%--        <div class="pageInfo">--%>
        <%--            共有<span>${serverResponse.data.total}</span>条记录，--%>
        <%--            <c:if test="${serverResponse.data.pageNum !=1}">--%>
        <%--                <a href="${pageContext.request.contextPath}/myorder/{customerId}/{odstate}/page/${serverResponse.data.pageNum-1}">上一页</a>，--%>
        <%--            </c:if>--%>


        <%--            当前是第 <span>${serverResponse.data.pageNum}</span>页，--%>

        <%--            <c:if test="${serverResponse.data.pageNum != serverResponse.data.pages}">--%>
        <%--                <a href=""></a>--%>
        <%--                <a href="${pageContext.request.contextPath}/myorder/{customerId}/{odstate}/page/${serverResponse.data.pageNum+1}">下一页</a>，--%>
        <%--            </c:if>--%>

        <%--            共有<span>${serverResponse.data.pages}</span>页--%>
        <%--        </div>--%>
    </div>

    <!--下方提示信息-->
    <div id="cmsfooter">
        <div id="service-2017">
            <!-- 多快好省 -->
            <div class="w hhzidingyi">
                <ol class="slogen">
                    <li class="item ">
                        <i>多</i>
                        品类齐全，轻松购物
                    </li>
                    <li class="item fore2">
                        <i>多</i>
                        多仓发货，极速配送
                    </li>
                    <li class="item fore3">
                        <i>好</i>
                        正品行货，精致服务
                    </li>
                    <li class="item fore4">
                        <i>省</i>
                        天天低价，畅选无忧
                    </li>
                </ol>
            </div>
            <!--下面的信息-->
            <div class="shulan-help">
                <div class="w hhzidingyi">
                    <div class="tishixinxi">
                        <span class="zititishixinxi">欢迎使用树懒商城，为您提供高质量的服务，是我们商城最高的追求！</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>


    $(".hhorderId").click(function () {
        var newMyOrderId = $(this).attr("data-id")
        console.log("id:" + newMyOrderId);

        $(".headunder").after(
            '<form id="payForm" action="<%=request.getContextPath() %>/ali/pay" method="post">\n' +
            '    <input type="hidden" name="newMyOrderId" id="newMyOrderId" />\n' +

            '    <input id="goPayBtn" type="submit" style="display: none;" value="前往支付宝进行支付">\n' +
            '</form>');

        $("#newMyOrderId").val(newMyOrderId);
        $("#goPayBtn").click();


    });


    //nofind
    $(document).ready(function () {
        if ($(".flag").val() != null) {
            console.log("xxx:" + $(".flag").html());
            $(".nofind").remove();
        }
    });

    var Id;

    $(".deleteBtn").click(function () {
        Id = $(this).parents().children("input.detailId").val();
        console.log("id: " + Id);

        alertMessage("您确定要删除该订单吗");
    });


    function alertMessage(message) {
        //示范一个公告层
        layer.open({
            type: 1,
            title: false, //不显示标题栏
            closeBtn: false,
            area: '300px;',
            shade: 0.25,
            id: 'LAY_layuipro', //设定一个id，防止重复弹出
            btn: ['确认', '取消'],
            btnAlign: 'c',
            moveType: 1, //拖拽模式，0或者1
            // content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br> layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以常常会有人以为 layui 是 <del>layerui</del><br><br>layer 虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级 ^_^</div>'
            content: '<div style="padding: 50px; line-height: 22px; background-color: white; color: black; font-weight: 300;">' + message + '！</div>',
            success: function (layero) {
                var btn = layero.find('.layui-layer-btn');
                btn.find('.layui-layer-btn0').click(function () {
                    console.log("id: " + Id);

                    $(".deleteForm" + Id).submit();
                });
            }
        });
    };


    //确认收货对话框
    $(".okBtn").click(function () {
        Id = $(this).parents().children("input.okId").val();
        console.log("id: " + Id);
        alertMessage2("您是否要确认收货");
    });


    function alertMessage2(message) {
        //示范一个公告层
        layer.open({
            type: 1,
            title: false, //不显示标题栏
            closeBtn: false,
            area: '300px;',
            shade: 0.25,
            id: 'LAY_layuipro', //设定一个id，防止重复弹出
            btn: ['确认', '取消'],
            btnAlign: 'c',
            moveType: 1, //拖拽模式，0或者1
            // content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br> layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以常常会有人以为 layui 是 <del>layerui</del><br><br>layer 虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级 ^_^</div>'
            content: '<div style="padding: 50px; line-height: 22px; background-color: white; color: black; font-weight: 300;">' + message + '！</div>',
            success: function (layero) {
                var btn = layero.find('.layui-layer-btn');
                btn.find('.layui-layer-btn0').click(function () {
                    console.log("id: " + Id);

                    $(".okForm" + Id).submit();
                });
            }
        });
    };


</script>
<style>
    .layui-layer-btn .layui-layer-btn0 {
        border-color: #0F0F0F;
        background-color: #42484D;
    }
</style>
</body>
</html>